<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="用户搜索" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入手机号/用户昵称" clearable />
        </el-form-item>

        <el-form-item label="成交意向" prop="deal_intent">
          <el-select v-model="state.params.deal_intent" placeholder="不限">
            <el-option v-for="item in purposeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟踪状态" prop="clue_follow_type">
          <el-select v-model="state.params.clue_follow_type" placeholder="不限">
            <el-option v-for="item in trackStateOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进人" prop="sales_id">
          <el-select v-model="state.params.sales_id" placeholder="不限" filterable>
            <el-option v-for="item in salesUserList" :key="item.sales_id" :label="item.sales_name" :value="item.sales_id" />
          </el-select>
        </el-form-item>

        <el-form-item label="到期版本" prop="product_title">
          <el-input v-model="state.params.product_title" placeholder="请输入版本号" clearable />
        </el-form-item>

        <el-form-item label="到期时间" prop="keyword">
          <el-date-picker
            v-model="state.params._userTimeArr"
            clearable
            value-format="YYYYMMDD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
        <el-form-item label="企业微信" prop="enterprise_wechat">
          <el-select v-model="state.params.enterprise_wechat" placeholder="不限">
            <el-option v-for="item in addTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- TODO： 去除线索类型 -->
        <el-form-item label="线索类型" prop="sales_user_type">
          <el-select v-model="state.params.sales_user_type" placeholder="不限">
            <el-option v-for="item in clueTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="最后访问" prop="keyword">
          <el-date-picker
            v-model="state.params._lastLoginTimeArr"
            clearable
            value-format="YYYYMMDD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
        <el-form-item label="跟踪时间" prop="keyword">
          <el-date-picker
            v-model="state.params._salesTimeArr"
            clearable
            value-format="YYYYMMDD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>

    <div class="base-block">
      <k-toolbar>
        <el-button :icon="Download" @click="onClickExportData">导出数据</el-button>
      </k-toolbar>
      <k-table v-bind="tableState" style="width: 100%" :default-sort="state.defaultSort" v-on="tableEvent">
        <template #sales_end_time="{ row }">
          <DateCountDown :value="row.sales_end_time" />
        </template>
        <template #clue_follow_type="{ row }">
          <BaseStatus :value-map="statusColorMap" :value="row.clue_follow_type" />
        </template>
      </k-table>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

import { Download } from '@element-plus/icons-vue';
import { useTableList, clueTypeOptions, purposeOptions, trackStateOptions, addTypeOptions, statusColorMap } from './hooks/use-table';
import DateCountDown from '@/components/base-date-countdown/index.vue';
import { getSalesUserList } from '@/api/crm-kgj/sales';
import { exportAllSalesOrder } from '@/api/crm-kgj/download';
import { AuthCode, hasPermission } from '@/modules/auth';
import BaseStatus from '@/components/base-status/index.vue';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
defineOptions({
  name: 'KgjSalesMyClue'
});

const { state, tableState, tableEvent, ...methods } = useTableList({});
const salesUserList = ref([{ sales_id: '', sales_name: '不限' }]);

/** 导出数据 */
const onClickExportData = async (row) => {
  if (hasPermission(AuthCode.KGJ_SALES_ALL_CLUE_LIST)) {
    const res = await exportAllSalesOrder(methods.getParams(state.params).data);
    if (res.err) return;
  }
};

/** 获取跟进人列表 */
const handleGetSalesUserList = async () => {
  const res = await getSalesUserList({ data: {}, params: { page: 1, limit: 500 } });
  if (res.err) return;
  salesUserList.value = salesUserList.value?.concat(res.data?.items);
};
onMounted(() => {
  if (hasPermission(AuthCode.KGJ_SALES_LIST, false)) {
    handleGetSalesUserList();
  }
});
</script>
